<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/lib/bootstrap.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/vue-resource.js"></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    body{
        font-size:12px;
    }
    table,
    th,
    td {
        border: 1px solid #eee;
        border-collapse: collapse;
        padding:10px;
        vertical-align: middle !important;
    }
    table td:nth-child(odd) {
       

    }
    /* table td:nth-child(1) {
         background-color: #f2f2f2;
    } */
    table tr:nth-child(even) {
        background-color:#ffffff;
    }
    table tr:nth-child(2) {
        background-color:#f2f2f2;
    }
    .btn{
        padding:2px 3px ;
    }

    #tan{
        width:600px;
        height:400px;
        position:fixed;
        left:200px;
        top:50px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #tantwo{
        width:600px;
        height:500px;
        position:fixed;
        left:200px;
        top:10px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #tanth{
        width:600px;
        height:500px;
        position:fixed;
        left:200px;
        top:10px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #bbt{
        position:absolute;
        right:0;
        top:0
    }
    #tanth2{
        width:600px;
        height:550px;
        position:fixed;
        left:200px;
        top:10px;
        background:#fff;
        opacity:1;
        z-index:1000;
        display:none;
        box-shadow:0px 5px 100px #000;
    }
</style>
<body>
<div class="" id="box" style="position:relative;">
    <div style="padding:15px 5px 0px 5px;border:.5px solid #ccc;margin-bottom:15px;width:80%;margin:20px 10%;box-shadow:3px 5px 15px">
        <table class="table table-hover">
            <tbody>
            <tr>
                <th colspan="15">返佣查询：</th>
            </tr>
            <tr>
                <td colspan="15">
                    手机号：
                    <input type="text" class="form-control" name="" id="" v-model="ph" value="" style="width:200px;display:inline-block"/>
                    <button v-on:click="shouji()" class="btn btn-default btn-sm">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="error" style="color:red"></span>                  
                </td>
            </tr>
            <tr class="text-center" style="background:#f2f2f2;font-weight:600;color:#666;font-size:14px">
                <td style="width:45px">序号</td>
                <td>订单创建时间</td>
                <td>下级用户手机号</td>
                <td>消费额度</td>
                <td>当前用户分润额</td>                             
            </tr>
            <tr class="text-center" v-for="(i,index) in list">
                <td style="width:30px">{{index+1}}</td>
                <td>{{i.creat_time}}</td>
                <td>{{i.ori_phone}}</td>
                <td>{{i.amount}}</td>
                <td>{{i.acq_amount}}</td>                        
            </tr>           
            </tbody>
        </table>
    </div>
    </div>
</body>
<script>
    $(function(){
        /*自定义时间戳*/
        Vue.filter('time', function (value) {//value为13位的时间戳
            function add0(m) {
                return m < 10 ? '0' + m : m
            }
            var time = new Date(parseInt(value));
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            return y + '-' + add0(m) + '-' + add0(d);
        });

        /*自定义过滤器*/
        Vue.filter("todo2",function(value){
            if(value == 0){
                return value = "未审核"
            }
            if(value == 1){
                return value = "已通过  √"
            }
            if(value == 2){
                return value = "审核失败×"
            }
            if(value == 3){
                return value = "未提交"
            }
        });
        new Vue({
            el:"#box",
            data: {
                list:[],
                ph:"",
                idcade:"",
                ye1:"",
                pages:"",
                page:"",
                gb:""
            },         
            methods:{
                /*审核状态查询*/
                shouji:function(){
                    var ph = this.ph
                    console.log(ph);
                    var data = {phone:ph,brand_id:2,start_time:"2016-05-10",end_time:"2018-11-19"};
                    console.log(data);
                    var brandid = ""
                    this.$http.post(window.baseUrl+"transactionclear/gradebrand/byphone/",data,{emulateJSON:true}).then(
                        function (res){
                            console.log(res)
                            console.log(res.data.result)
                            this.list = res.data.result
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                }
             
              
                /*根据手机号码搜索用户*/
               /* shouji:function(){
                    token = sessionStorage.getItem(key=1);
                    console.log(token);
                    var ph = this.ph;
                    console.log(ph);
                    this.$http.post(window.baseUrl+"user/info/query",{phone:ph},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result);
                            if(res.data.resp_code == 000000){
                                this.list = res.data.result.content;
                                $("#error").text("")
                            }
                            if(res.data.resp_code == 000007){
                                $("#error").text("用户不存在！")
                            }
                        },function (res) {
                            console.log(res)
                            alert("查询失败！")
                        }
                    );
                },*/
             
            }
        })
    })
</script>
</html>

